react native (一)
开始接触app方面的工作，真心塞~又开始了周而复始的死磕一个问题专坐一整天的节奏，关键是还没有成绩，实在无语。╮(╯▽╰)╭，还是总结一下最近心塞历程吧……react native中文网：http://reactnative.cn/docs/0.48/getting-started.html看看文档就上手吧（默认环境均已配好）：1.新建项目的那些事：将npm包...
2024-01-10
react native 生成APK
参考地址：React native Android 命令 打包apk首先：尝试使用模拟器测试 这里是因为需要确认目前在电脑上的模拟器是可以正常运行的，并且，开发React native的应用程序，肯定是需要做一些本地测试的 第一：生成签名密钥这一步的操作主要是生成需要的签名密钥，供android调用，生成的文件待用在项目...
2024-01-10
react native 实现拖拽排序
先上效果图，意思意思。其实原理很简单，没有想的那么难。大家在改造的时候，请注意 this.offset 的值，因为它关系到查找目标box的index（原理：手势释放时，所在的坐标值来推算出目标box的Index），本文代码可读性还...
2024-01-10
react native 获取地理位置
此版本是0.47react native 官网介绍了这个 api Geolocation 但是这个api只能返回 经纬度 所以要把经纬度 通过逆地理位置转义 http://recode.ditu.aliyun.com/jsdoc/geocode_api.html 可通过这个阿里的开放接口RN 0.55以下版本需要导入 不包括0.55import Geolocation from 'Geolocation';0.55 以及0.55以上 Android 上获取可能存在问题 官网介...
2024-01-10
一个标准的 react-native 组件
前言：react-native开发的app，虽然说是兼容 android 和 ios 两端；但其框架本身的设计思想有很多还是和前端类似的（毕竟是 react 的衍生产物）；其开发模式主要还是组件化！今天，来总结一下，一个 react-native 标准的组件包括哪些元素：标准的组件完整代码：import React, {Component} from "react";import { Style...
2024-01-10
react-native 关闭黄屏警告
将代码放在index.js 中 AppRegistry.registerComponent('App', () => App)之前 //关闭其中某些yellow警告console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please use BackHandler instead.','source.uri should not be an empty string','Invalid props.style key']; // 关...
2024-01-10
初学：react-native 轮播图
参考资料：http://reactscript.com/react-native-card-carousel-component/import React, {Component} from 'react';import { StyleSheet, Text, Image, View} from 'react-native';import CarouselCard from '../carouselCard/Card';import Carousel, {Pagination} fr...
2024-01-10
react-native学习中问题汇总
问题描述：creact-react run-android时报错： Could not get unknown property ‘MYAPP_RELEASE_STORE_FILE’ for SigningConfig_Decorated 截图： 参考：传送门持续跟新~~~...
2024-01-10
react native实现隐藏和显示
1.目的：在APP开发中实现隐藏和显示功能。如点击某一列表，显示其列表下的内容2.实现思路：通过对this.state显示初始状态的判断和三目比较来实现影藏和显示3.代码实现大家如果有其他的好方法可以贴出来一起交流学习（RN新手，欢迎大家指正！！！）...
2024-01-10
react-native 打开设置界面
iOSiOS打开设置还是比较简单的，使用Linking组件即可：Linking.openURL('app-settings:') .catch(err => console.log('error', err))Android1、在android/app/src/main/java/com/<projectname>/文件夹下创建opensettings文件夹2、在这个文件夹下创建模块文件OpenSettingsModule.java（模块功能）和包文件OpenSettingsPackage.java（注册...
2024-01-10
react-native 列式布局 行式布局
/** * Create by bamboo on 2018-04-13 * 页面布局 */import React, { Component } from 'react';import { StyleSheet, Text, View,} from 'react-native';export de...
2024-01-10
再看react native组件生命周期
componentwillreceiveprops可用以下方法替换什么时候在componentwillMount中初始化想要用ref获取到真实的dom节点的时候：应该在willmount方法中进行，在构造方法中是获取不到真实的dom节点的想从远端加载数据，进行请求⚠️注意：在这个方法中调用setState方法将会触发一次渲染，但是它是在浏览器刷新屏...
2024-01-10
mac 本搭建react-native环境
开始做rn（react-native）项目了，无比激动。 首先我们从rn的环境搭建开始。 1.安装必须的软件 包括以下： （1）Node （2）Xcode（最好在苹果的app store上下载并且安装） （3）Android Studio 在安装Android Studio之前需要安装JDK， 具体参照react-native 官网 默认点击OK即可 next 正在安装中。。。 next 这里选择...
2024-01-10
【0.44】React Native 中文更新日志
本文为 Marno 原创，转载必须保留出处！公众号 aMarno，关注后回复 RN 加入交流群React Native 优秀开源项目大全：http://www.marno.cn一、导读本次更新亮点：在 IOS 上彻底移除了对 FlatList 进行优化：比如支持固定头部等个人感觉这期更新基本可以忽略了！可以忽略了！可以忽略了！二、重大变化...
2024-01-10
如何在react-native中制作圆形滑块
我想添加一个类似范围的组件。但是实际上是圆形的，我不知道该怎么做。请给我一些帮助。我想要的例子：回答：我最近一直在使用react-native-svg，我认为这太棒了-SVG和React是geek-heaven的完美结合，非常适合创建自定义UI，而无需下拉至本机绘图代码。这是一个CircularSlider实现上述内容的小组件：im...
2024-01-10
在 react 中 用echarats
在 react 中 用echarats ，用原生的方法写如下： 也可以用 react 的写法：在写的过程中遇到一个问题：刚开始用的一个 renderSaleAnalyseChart 这个方法，然后在 render 中调，然后在保存 这个 echarts 中的数据的时候出现了问题，销售列表发生两段数据值。在这里要注意，因为 render 中是不能有 setState 这...
2024-01-10
APP开发哪个框架好 也谈react native框架
从最近的研究报告指出，移动电商占据90%以上的份额，市场已由当初的PC为王发生了质的变化。移动端流量入口成了商家的必争之地，app商城成了商家最受欢迎的电商应用，那么商家要如何进行电商app开发、应选用什么框架进行开发呢？1、需求分析要清晰app开发通入最终的使用者是用户，因此用户体...
2024-01-10
从web移动端布局到react native布局
在web移动端通常会有这样的需求，实现上中下三栏布局（上下导航栏位置固定，中间部分内容超出可滚动），如下图所示：实现方法如下：HTML结构：<div class='container'> <div class='header'></div> <div class='content'></div> <div class='footer'></div></div>首先可以利用fixed或者absolute定位，实现简单。现在介绍...
2024-01-10
react-native热更新从零到成功中的各种坑
https://github.com/reactnativecn/react-native-pushy/blob/master/docs/guide.mdAndroid NDK暂时没有安装在你的项目根目录下运行以下命令：1. npm install -g react-native-update-cli rnpm成功截图2. 安装命令示例：（我的0.37）npm install --save react-native-update@4.x把此工程的相关操作关掉，否则好像会报错（npm ERR! e...
2024-01-10
用 `react native` 模仿做的一个美团客户端首页
一开始让我开发ios我是拒绝的，因为看到oc的语法，略感蛋疼，实在是不想套进去，可能苹果也意识到了这个问题，所以推出了swift，我研究了一下，感觉这才像是编程语言，起码人性化多了，但是Xcode代码补全弱爆了，可能是idea用惯了，xcode真心不习惯了，装了插件也感觉好弱，折腾没多久，就搁置了...
2024-01-10详解如何在项目中使用jest测试react native组件
目前Javascript的测试工具很多，但是针对React的测试策略，Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址：https://facebook.github.io/jest/。我们可以看到Jest官网宣称的是：Painless JavaScript Testing。是Facebook用于测试服务和React应用程序的JavaScript单元测试框架。所谓单元测试也就是对每个单元进行测试，通...
2024-01-10
react ant design 清除绑定的对象中的一个属性
数据结构 如下let formData = {childList:[{attachMsg ：{image}}]}我想清楚除掉form表单上绑定的attachMsg或者image，但始终清除不掉我是这样绑定的试着这样子清除全都无效点击 表单的提交方法 验证还是会通过，打印value还是存在求问怎么清除回答setFieldsValue({formData:{...formData}})...
2024-01-10React 中的 State 和生命周期
通过 render 更新开篇先提供了一个例子，会用外部的不断更新状态，来不断刷新 Clock 的组件内容。function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is {props.date.toLocaleTimeString()}.</h2> </div> );}function tick() { ReactDOM.render( <Clock date={new Date()}...
2024-01-10在React中使用SetInterval卸载组件
我正在尝试使用setInterval卸载组件。这是基于这里的答案：零件：class ImageSlider extends React.Component { constructor(props) { super(props); this.state = { activeMediaIndex: 0 }; } componentDidMount() { setInterval(this.changeActiveMedia.bind(this), 5000); } changeAct...
2024-01-10
深坑react 引入antd无效问题
//安装babel-plugin-import第一步：npm install babel-plugin-import --save第二步：暴露webpack.config.js运行：npm run eject第三步：在webpack.config.js中的module下的oneOf数组里加入下面代码： {//ES6、JSX处理 test: /(\.jsx|\.js)$/, exclude: /node_modules/, load...
2024-01-10
